<mat-toolbar class="title" color="primary">
    <div>Settings</div>
    <button mat-icon-button (click)="onNoClick()">
      <mat-icon>close</mat-icon>
    </button>
  </mat-toolbar>
  
  <div mat-dialog-content>
    <div class="example-container">
      <mat-form-field>
        <mat-label>Title</mat-label>
        <input matInput [(ngModel)]="data.title">
      </mat-form-field>
  
      
      <div>
        <label>Theme: </label>
        <mat-radio-group
          aria-labelledby="example-radio-group-label"
          class="example-radio-group"
          [(ngModel)]="data.params.theme">
          <mat-radio-button style="padding-left: 0.5rem;" *ngFor="let season of ['light', 'dark']" [value]="season">
            {{season}}
          </mat-radio-button>
        </mat-radio-group>
      </div>
      
      <div>
        <label>Time range: </label>
        <mat-radio-group
          aria-labelledby="example-radio-group-label"
          class="example-radio-group"
          [(ngModel)]="data.typeDataRange">
          <mat-radio-button style="padding-left: 0.5rem;" 
            *ngFor="let season of [
              {name: 'Dashboard', value: 'global'},
              {name: 'Grafana', value: 'grafana'}
            ]" [value]="season.value">
            {{season.name}}
          </mat-radio-button>
        </mat-radio-group>
        
      </div>
      <div *ngIf="data.typeDataRange === 'grafana'">
        <mat-form-field>
          <mat-label>From:</mat-label>
          <input matInput [(ngModel)]="data.params.from">
        </mat-form-field>
      
        <mat-form-field style="padding-left: 0.5rem;">
          <mat-label>To: </mat-label>
          <input matInput [(ngModel)]="data.params.to">
        </mat-form-field>
  
        
        <mat-form-field style="padding-left: 0.5rem;">
          <mat-label>Refresh delay: </mat-label>
          <input matInput [(ngModel)]="data.params.refresh">
        </mat-form-field>
        <p>if empty field that onrefresh, or (2s, 5m, 10h, etc...)</p>
  
        <div>
          <a href="https://grafana.com/docs/reference/timerange/" target="_blank">Grafana timerange docs</a>
        </div>
        <hr>
      </div>
  
      <div>   
        <mat-form-field *ngIf="isLoggedIn">
          <mat-label>Dashboard</mat-label>
          <mat-select
            [compareWith]="compareDashboard"
            [(ngModel)]="dashboardSource"
            (selectionChange)="onDashboardChange()"> 
            <mat-optgroup *ngFor='let group of dashboardList' [label]='group.group'>        
              <mat-option *ngFor="let item of group.list" [value]="item">
                      {{ item.title }}
              </mat-option>
              </mat-optgroup>   
          </mat-select>
        </mat-form-field>
  
        <mat-form-field style="padding-left: 0.5rem;" *ngIf="isLoggedIn">
          <mat-label>Panel</mat-label>
          <mat-select
            [compareWith]="comparePanel"
            [(ngModel)]="panelListValue"
            (selectionChange)="onPanelSelect()">
              <mat-option *ngFor="let item of panelList" [value]="item">
                {{ item.title }}
              </mat-option>
            </mat-select>
        </mat-form-field>
        <h6 *ngIf="!isLoggedIn">Invalid Login Or Password, please correct it in Advanced Settings </h6>
      </div>
  
      <div class="example-container">
        <mat-form-field>
          <mat-label>Description</mat-label>
          <input matInput [(ngModel)]="data.desc">
        </mat-form-field>
      </div>
  
    </div>
  </div>
  
  <div mat-dialog-actions style="float: right; margin-bottom: 0rem;">
    <button mat-raised-button (click)="onNoClick()">Cancel</button>
    <button mat-raised-button color="primary" [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
  </div>
  